<template>
  <div class="search">
    <div class="weizhi">
      <div v-for="zhuanji in zhuanji" :key="zhuanji.id" @click="selectSongJianJie(song)">
        <span>{{zhuanji.type}}</span>:
        <span>{{zhuanji.name}}</span>
      </div>
    </div>
    <div class="vansearch">
      <van-search v-model="value"  placeholder="请输入搜索关键词" @search="onSearch()" @cancel="onCancel()" />
    </div>
    <div class="wrapper">
      <div>
        <span class="zuijiapipei">最佳匹配</span>
        <div class="content">
          <div class="contenttop" v-for="song in song" :key="song.id" @click="selectSongJianJie(song)">
            <div class="geshou">
              <img :src="song.picUrl" alt="">
              <span>{{song.occupation}}:{{song.name}}({{song.alias[0]}})</span>
            </div>
            <div class="biaoqian">
              <i class="iconfontunicode" >&#xe617;</i>
            </div>
          </div>
          <div class="contentbottom" v-for="zhuanji in zhuanji" :key="zhuanji.id" @click="selectSongZhanJi(zhuanji)">
            <div class="zhanji" >
              <img :src="zhuanji.picUrl" alt="">
              <span class="zhanjisinger" v-for="zhuanjiname in zhuanji.artists" :key="zhuanjiname.id">
                {{zhuanjiname.name}}
              </span>
            </div>
            <div class="biaoqianbottom">
              <i class="iconfontunicode">&#xe617;</i>
            </div>
          </div>
        </div>
        <div class="songinfo">
          <ul>
                <li v-for="item in songinfolist" :key="item.id" @click="selectPlayList(item)">
                    <div class="infolistpic">
                        <img :src="item.al.picUrl" alt="">
                    </div>
                    <div class="text">
                        <div class="txt">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="songnamebox">
                            <span v-for="songname in item.ar" :key="songname.id" class="songname">{{songname.name}}/</span>
                            <span>-{{item.al.name}}</span>
                        </div>
                    </div>
                    <div class="picture">
                        <span class="iconfont"> <i class="iconfont icon-70BasicIcons-all-64"></i></span>
                    </div>
                </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Toast } from 'vant';
export default {
  created(){
    this.getPlaylistHot();
  },
  data(){
    return{
      value:'林俊杰',
      songinfolist:[],
      song:[],
      zhuanji:[],
    };
  },
  methods:{
    getPlaylistHot(){
      axios.get("/api/cloudsearch?keywords="+this.value+"&offset=30&type=1")
      .then(res => {
        console.log(res.data);
        console.log(res.data.result.songs);
        this.songinfolist=res.data.result.songs
      })
      .catch(err => {
        console.error(err); 
      })
    },
    getsinger(){
      axios.get("/api/search/multimatch?keywords="+this.value)
      .then(res => {
        console.log(res.data);
        console.log(res.data.result.artist);
        console.log(res.data.result.album);
        this.song=res.data.result.artist;
        this.zhuanji=res.data.result.album;
      })
      .catch(err => {
        console.error(err); 
      })
    },
    selectPlayList(item){
        // this.$store.commit("setSinger",item)//可以理解为是一个动作action,muation是同步服务
        const clickrankid = item.id//这里的item后面的值是拉取数据里面的真实数据
        this.$router.push({//路由管理器必须要加r
        name:'Playerall',
        //有多个参数时
        params:{id:clickrankid},
        //只有一个参数时
        // params:{playlistid},
        })
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
        },
        selectSongJianJie(song){
        // this.$store.commit("setSinger",item)//可以理解为是一个动作action,muation是同步服务
        const clickrankid = song.id//这里的item后面的值是拉取数据里面的真实数据
        this.$router.push({//路由管理器必须要加r
        name:'SongJianJie',
        //有多个参数时
        params:{id:clickrankid},
        //只有一个参数时
        // params:{playlistid},
        })
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
        },
        selectSongZhanJi(zhuanji){
        this.$store.commit("setZhuanji",zhuanji)//可以理解为是一个动作action,muation是同步服务
        const clickrankid = zhuanji.id//这里的item后面的值是拉取数据里面的真实数据
        this.$router.push({//路由管理器必须要加r
        name:'SongZhanJi',
        //有多个参数时
        params:{id:clickrankid},
        //只有一个参数时
        // params:{playlistid},
        })
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
        },
    onSearch() {
      // Toast(val);
      this.getPlaylistHot()
      this.getsinger()
    },
    onCancel() {
      Toast('取消');
    }
},
  mounted() {
    this.getPlaylistHot();
    this.getsinger()
  }
}
</script>

<style scoped>
ul li {
  display: inline-block;
  text-align: left;
}
ul > li {
  display: inline-block;/**设置为行内元素，强制不换行，同时具备block */
}
.txt{
    text-align:left;
}
.songinfo{
    text-align: left;
}
.txt > span{
    display: block;
    color: black;
    font-size: 20px;
    line-height: 30px;
}
.songname{
    color: grey;
    font-size: 15px;
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    width: 40px;
    display: inline-block; */
}
.songnamebox{
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    width: 250px;
}
.text{
    float: left;
    width: 280px;
    height: 50px;
    /* box-shadow: 5px 5px 5px red; */
    margin-bottom: 10px;
    float: left;
}
.picture{
    float: right;
    width: 30px;
    height: 30px;
    /* box-shadow: 5px 5px 5px black; */
}
.iconfont{
    color: green;
}
.infolistpic > img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.infolistpic{
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}
.zuijiapipei{
  font-size: 12px;
  display: block;
  text-align: left;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.content{
  width: 100%;
  height: 140px;
  margin-bottom: 25px;
  /* box-shadow: 5px 5px 5px red; */
  position:flex /*父元素常见属性*/
  /*设置主轴的方向*/
  /*flex-direction：  row行,column列*/
  /*设置主轴上的子元素排列方式*/
  /*justify-content： space-around平分,space-between两边贴中间平分,space-evenly每个间距相同*/
  /*设置子元素是否换行*/
  /*flex-wrap：wrap/nowrap*/
  /*设置侧轴上的子元素排列方式（单行）*/
  /*align-items：stretch 拉伸*/
  /*设置侧轴上的子元素的排列方式（多行）*/
  /*align-content：stretch 子元素高度平分父元素高度*/
  /*flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap*/
  /*子元素常见属性*/
  /*align-self 子元素自己在侧轴的排列方式*/
  /*order 属性定义子项的排列顺序(前后顺序) */;
}
.geshou{
  height: 50%;
  width: 90%;
  float: left;
  /* box-shadow: 5px 5px 5px green; */
}
.zhanji{
  width: 100%;
  height: 50%;
  /* box-shadow: 5px 5px 5px black; */
}
.geshou > img{
  width: 55px;
  top: 7rem;
  left: 2rem;
  height: 55px;
  position: absolute;
}
.zhanji > img{
  width: 55px;
  top: 11.8rem;
  left: 2rem;
  height: 55px;
  position: absolute;
}
.geshou > span{
  display: inline-block;
  position: absolute;
  top: 8rem;
  left: 7rem;
}
.zhanjisinger{
  display: block;
  position: absolute;
  top: 14.5rem;
  font-size: 10px;
  left: 7.2rem;
}
.biaoqian{
  float: right;
  position: absolute;
  right: 2rem;
  top: 8rem;
}
.biaoqian > span{
  font-size: 20px;
  display: block;
  position: absolute;
  top: 8rem;
  right: 2rem;
  color: grey;
}
.biaoqianbottom{
  font-size: 20px;
  display: block;
  position: absolute;
  top: 13rem;
  right: 2rem;
  color: grey;
}
.iconfontunicode{
  color: green;
  font-size: 20px;
}
.weizhi{
  position: absolute;
  top: 11.8rem;
  left: 7rem;
}

</style>
